<template>
  <div class="all">
    <rit_cont :dl="tableData[listindex]" :style="{display:ritshow, position:'fixed',top:rittop+'px',left:ritleft+'px','z-index':'10'}"></rit_cont>
    <el-container>
       <el-header class="el-header" style="display:flex;justify-content:space-around">
         <span>
             <el-button type="primary" icon="el-icon-menu"></el-button>
             <el-button type="primary" icon="el-icon-delete" ></el-button>
             <template v-if="issearch">
               <el-input
                 placeholder="请输入内容"
                 prefix-icon="el-icon-search"
                 v-model="searchtxt"
                 clearable
                 style="width:30%;">
               </el-input>
             </template>
             <el-button type="primary" :icon="iconsearch" @click="issearch=!issearch;issearch?iconsearch='el-icon-circle-close-outline':iconsearch='el-icon-search'"></el-button>
             <el-button type="primary"  @click="dialogVisible=true"><i class="el-icon-upload el-icon--right"></i></el-button>
             <el-button type="primary" icon="el-icon-edit"></el-button>
             <el-dialog
              title="文件上传"
              :visible.sync="dialogVisible"
              width="40%"
              :before-close="handleClose">
              <span style="display:flex;justify-content:center"><el-upload
                class="upload-demo"
                drag
                action="http://192.168.0.102/post"
                multiple>
                <div class="">
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                </div>
                <div class="el-upload__tip" slot="tip">你上传的文件将会保存到当前目录下,限制上传1GB。</div>
              </el-upload></span>
              <span slot="footer" class="dialog-footer">
                <el-button @click="clickupload">取 消</el-button>
                <el-button type="primary" @click="clickupload">确 定</el-button>
              </span>
            </el-dialog>
         </span>
       </el-header>
    </el-container>
    <el-container class="el-mid">
       <el-main class="el-main"><!--这是一个主体-->
         <div style="height:100%;" @mousedown="mouseck">
           <el-table
             ref="multipleTable"
             :data="tableData"
             tooltip-effect="dark"
             style="width: 100%;height:100%">
             <el-table-column
               type="selection"
               reserve-selection
               width="33">
             </el-table-column>
             <el-table-column
               label="#"
               prop="id"
               width="33">
             </el-table-column>
             <el-table-column
               label="名称"
               prop="name"
               sortable>
               <template slot-scope="scope">
                 <div style="display:flex;">
                   <img :src="scope.row.lx==1?'timg.jpg':'wj.jpg'" width="20px" height="20px" alt="失败"></img>
                   {{scope.row.name}}
                 </div>
               </template>
             </el-table-column>
             <el-table-column
               prop="update"
               label="时间"
               sortable>
             </el-table-column>
             <el-table-column
               prop="size"
               label="大小"
               sortable>
             </el-table-column>
             <el-table-column
             label="-操作-">
               <template slot-scope="scope">
                 <el-button type="primary" icon="el-icon-more" circle @click="open"></el-button>
               </template>
             </el-table-column>
           </el-table>
         </div>
       </el-main>
     </el-container>
  </div>
</template>

<script>
import rit_cont from "./rit_cont.vue";
  export default {
    data(){
      return {
        issearch:false,
        searchtxt:"",
        iconsearch:"el-icon-search",
        dialogVisible:false,
        tableData:[{id:0,name:"文件夹",ph:"./1.txt"},{id:1,name:"文件"}],
        ritshow:"none",
        rittop:10,
        ritleft:10,
        listindex:-1
      }
    },
    components:{
      rit_cont
    },
    methods: {
      handleClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => {});
    },
    open(e){
      e.cmd=1;
      this.mouseck(e);
    },
    xiazai(index){
      console.log(index);
    },
    del(index){
      console.log(index);
    },
    getlist(){
      let url = "http://192.168.0.102/post";
      this.$http.post(url,{command:"select"}).then((res)=>{
          if (res.body.status==0){
            this.tableData=res.body.message;
            console.log(res.body);
          }
      },(res)=>{console.log(res);});
      console.log("getlist");
    },
    clickupload(){
      this.getlist();
      this.dialogVisible = false;
    },
    mouseck(e){
    //  console.log(e);
      for (let i=0;i<5;i++){
        if (e.path[i].nodeName=="TR"){
            let t = e.path[i].textContent;
               this.listindex=Math.floor(t.split(' ')[0]);
               console.log(this.listindex);
        }
      }
    if(e.button ==2 || e.cmd==1){
        this.rittop=e.clientY;
        this.ritleft=e.clientX;
　　　 this.ritshow="";
    }else{
      this.ritshow="none";
    }
    }
  },
  created() {
        //do something after creating vue instance
        this.getlist();
  }
}

window.addEventListener("touchstart",function(event){
    console.log(event);
})

</script>

<style scoped>
.all{
  color: #333;
  height: 100%;
}
.el-header {
    background-color: #B3C0D1;
    line-height: 60px;
    font-weight: 900;
    font-family: "YouYuan";
    font-size: 20px;
  }

  .el-mid{
    height: 94%;
  }

  .el-aside {
   background: #d3dce6;
 }

 .el-main{
   background: #e9eef3;
   padding: 1px;
 }

</style>
